<template>

    <div>
        <div class="message-list">
            <div style="display: table-row;">

                <div class="message-list-title">
<!--                    序号-->
                </div>
                <div class="message-list-title" style="text-align: left">
                    名称
                </div>
<!--                <div class="message-list-title">-->
<!--                    开展周期-->
<!--                </div>-->
                <div class="message-list-title">
                    发布时间
                </div>
                <div class="message-list-title">
                    状态
                </div>
                <div class="message-list-title"></div>

            </div>
            <div style="display: table-row;" v-for="(item,index) in surveyList" :key="item.id">
                <div class="message-list-item" style="width: 40px;">
                    {{index + 1}}
                </div>
                <div class="message-list-item" style="text-align: left;">
                    {{item.name}}
                </div>
<!--                <div class="message-list-item" style="width: 20%;">-->
<!--                    {{getDate(item.start_timestamp)}} - {{getDate(item.stop_timestamp)}}-->
<!--                </div>-->
                <div class="message-list-item" style="">
                    {{item.create_time}}
                </div>
                <div class="message-list-item" style="color: red;" v-if="item.is_submit===0">
                    未填写
                </div>
<!--                <div class="message-list-item key-word" style="" v-if="item.is_submit===1">-->
<!--                    已填写-->
<!--                </div>-->
                <div class="message-list-item" style="width: 60px;">
                    <el-button class="detail" size="mini" @click="readNotify(item)" style="size: 100px;">详情</el-button>
                </div>
            </div>
        </div>

        <div class="paginationClass">
            <el-pagination
                    @current-change=currentChange
                    :current-page.sync=currentPage
                    :page-size="size"
                    layout="prev, pager, next, jumper"
                    :total=total
                    style="margin-right: 40px">
            </el-pagination>
        </div>
    </div>

</template>

<script type="text/ecmascript-6">
    import Cookies from 'js-cookie'
    import API from '../../api'

    export default {
        name: "ph_message_list_table",
        data() {
            return {
                token: Cookies.get('token'),
                surveyList: {},
                inMain: false,
                total: 0,
                currentPage: 1,
                size: 30
            }
        },
        mounted: function () {
            this.getSurveyList();
        },
        methods: {
            /**
             * 计算发布时间
             * */
            getDate(timestamp) {
                let now = new Date(timestamp),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1,
                    d = now.getDate();
                return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " "
            },
            currentChange(val) {
                this.currentPage = val;
                this.getNotifyList();
            },
            /**
             * 获取征集列表
             * */
            getSurveyList() {
                // 判断是否 不在首页
                this.inMain = this.$route.path === '/phone/message/';
                console.log(this.inMain);
                if (this.inMain) {
                    let data = {
                        token: this.token,
                        orderby: {},
                        page: 1,
                        size: 5,
                    };
                    API.surveylist(data).then(res => {
                        if (res.code) {
                            alert(res.message);
                            return;
                        }

                        this.surveyList = res.list;
                        this.surveyList = this.surveyList.filter(item => {
                            if (item.is_submit===0) return true;
                        });
                        return res;

                    }).catch(msg => {
                        alert('操作失败')
                    })
                } else {
                    let data = {
                        token: this.token,
                        orderby: {},
                        page: 1,
                        size: 20,
                    };
                    API.surveylist(data).then(res => {
                        if (res.code) {
                            alert(res.message);
                            return;
                        }
                        this.surveyList = res.list;
                        this.surveyList = this.surveyList.filter(item => {
                            if (item.is_submit===0) return true;
                        });
                        return res;

                    }).catch(msg => {
                        alert('操作失败');
                    })
                }
            },
            /**
             * 阅读
             * */
            readNotify(item) {
                this.$router.push({path: `/phone/message/${item.id}/detail`});
            }
        }
    }
</script>

<style scoped>
    .message-list {
        display: table;
        width: 100%;
        padding: 20px 10px 15px;
    }

    .message-list-title {
        display: table-cell;
        font-size: 15px;
        text-align: center;
        color: rgb(128, 128, 128);
    }

    .message-list-item {
        display: table-cell;
        font-size: 12px;
        text-align: center;
    }

    .blueLine {
        background-color: #e4efff;
    }

    .paginationClass {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: 5%;
        padding-bottom: 15px;
        padding-top: 10px;
    }

    .detail {
        margin: 5px  0 5px 0;
        height: 25px;
        color: #fff;
        background: rgb(80, 137, 185);
    }

    .key-word {
        color: #2ccd8d;
    }

</style>
